<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .score-case {
            width: 1000px;
            margin: 50px auto;
            display: flex;
        }

        .score-case .table {
            flex: 4;
        }

        .score-case .table table {
            width: 100%;
            border-spacing: 0;
            border-top: 1px solid #ccc;
            border-left: 1px solid #ccc;
        }

        .score-case .table table th {
            background: #f5f5f5;
        }

        .score-case .table table tr:hover td {
            background: #f5f5f5;
        }

        .score-case .table table td,
        .score-case .table table th {
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
            text-align: center;
            padding: 10px;
        }

        .score-case .table table td.red,
        .score-case .table table th.red {
            color: red;
        }

        .score-case .table .none {
            height: 100px;
            line-height: 100px;
            color: #999;
        }

        .score-case .form {
            flex: 1;
            padding: 20px;
        }

        .score-case .form .form-item {
            display: flex;
            margin-bottom: 20px;
            align-items: center;
        }

        .score-case .form .form-item .label {
            width: 60px;
            text-align: right;
            font-size: 14px;
        }

        .score-case .form .form-item .input {
            flex: 1;
        }

        .score-case .form .form-item input,
        .score-case .form .form-item select {
            appearance: none;
            outline: none;
            border: 1px solid #ccc;
            width: 200px;
            height: 40px;
            box-sizing: border-box;
            padding: 10px;
            color: #666;
        }

        .score-case .form .form-item input::placeholder {
            color: #666;
        }

        .score-case .form .form-item .cancel,
        .score-case .form .form-item .submit {
            appearance: none;
            outline: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 4px 10px;
            margin-right: 10px;
            font-size: 12px;
            background: #ccc;
        }

        .score-case .form .form-item .submit {
            border-color: #069;
            background: #069;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="score-case">
            <div class="table">
                <table>
                    <thead>
                        <tr>
                            <th><input type="checkbox"></th>
                            <th>编号</th>
                            <th>科目</th>
                            <th>成绩</th>
                            <th>考试时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in list">
                            <td><input type="checkbox" v-model="item.isSelect"></td>
                            <td>{{ index + 1 }}</td>
                            <td>{{ item.subject }}</td>
                            <td :class="{red: item.score < 60}">{{ item.score }}</td>
                            <td>{{ item.date }}</td>
                            <td><a href="#">删除</a></td>
                        </tr>
                    </tbody>
                    <!-- <tbody >
              <tr>
                <td colspan="6">
                  <span class="none">暂无数据</span>
                </td>
              </tr>
            </tbody> -->
                    <tfoot>
                        <tr>
                            <td colspan="6">
                                <span>总分：321</span>
                                <span style="margin-left:50px">平均分：80.25</span>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div class="form">
                <div class="form-item">
                    <div class="label">科目：</div>
                    <div class="input">
                        <input type="text" placeholder="请输入科目" />
                    </div>
                </div>
                <div class="form-item">
                    <div class="label">分数：</div>
                    <div class="input">
                        <input type="text" placeholder="请输入分数" />
                    </div>
                </div>
                <div class="form-item">
                    <div class="label"></div>
                    <div class="input">
                        <button class="submit">添加</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    list: [
                        { id: 15, subject: '语文', score: 89, date: new Date('2022/06/07 10:00:00'), isSelect: false },
                        { id: 27, subject: '数学', score: 100, date: new Date('2022/06/07 15:00:00'), isSelect: false },
                        { id: 32, subject: '英语', score: 56, date: new Date('2022/06/08 10:00:00'), isSelect: false },
                        { id: 41, subject: '物理', score: 76, date: new Date('2022/06/08 10:00:00'), isSelect: false }
                    ],
                    subject: '',
                    score: ''
                }
            }
        })
    </script>
</body>

</html>